@import '~@/assets/style/theme/admin/button/dd-button.scss';

// 每个主题特有的设置
.theme-#{$theme-name} {
  color: $theme-font-color-main;

  // 角色菜单权限对话框
  .role-right-dialog {
    .row-box {
      border: 1.75px solid $theme-table-border-color;
      .left-col {
        border-right: 1px solid $theme-table-border-color;
      }
      .col-title {
        border-bottom: 1px solid $theme-table-border-color;
      } 
    }
  }

  .el-loading-mask {
    background-color: $theme-bg-mask !important;
  }

  .el-message {
    &.el-message--info {
      background-color: $theme-message-info-background-color;
      color: $theme-font-color-main;
      border-color: $theme-font-color-onlyread;
    }
  }
  // 重写消息弹窗样式
  .el-message-box {
    background-color: $theme-message-info-background-color;
    border: $theme-message-info-border;
    .el-message-box__title, .el-message-box__close, .el-message-box__message {
      color: $theme-font-color-main;
    }
  }

  // 重写所有弹出面板的背景颜色
  .el-popper {
    background-color: $theme-bg-color;
  }

  .el-card {
    &.dd-card {
      border: $theme-container-border-outer;

      .el-card__header {
        border-bottom: $theme-container-border-outer;
      }
    }
  }

  // 重写 card-container 样式
  .card-container {
    background-color: $theme-bg-color;
  }
  .card-title__text--default {
    color: $theme-font-color-card-title;
  }
  .card-content {
    color: $theme-font-color-main;
  }

  // 重写输入类型 样式
  .el-input__inner,
  .el-textarea__inner {
    color: $theme-font-color-main;
    font-weight: 400;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-size: 14px;
    background-color: $theme-bg-color;
    border: $theme-message-info-border;
  }
  .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  .el-input__icon {
    color: $theme-font-color-main;
  }
  // 禁用状态下 input 内容的背景颜色
  .is-disabled {
    .el-input__inner,
    .el-textarea__inner {
      border: $theme-table-border-color;
      background-color: $theme-message-info-background-color-hover;
    }
  }

  // placeholder提示文本
  .el-input__inner::placeholder {
    color: $theme-font-color-holder;
  }
  /* 谷歌 */
  .el-input__inner::-webkit-input-placeholder {
    color: $theme-font-color-holder;
  }
  /* 火狐 */
  .el-input__inner:-moz-placeholder {
    color: $theme-font-color-holder;
  }
  /*ie*/
  .el-input__inner:-ms-input-placeholder {
    color: $theme-font-color-holder;
  }

  // 重写时间选择器样式
  .el-range-input, .el-range-separator {
    color: $theme-font-color-main;
    background-color: $theme-bg-color;
  }
  // 选择面板标题颜色
  .el-date-range-picker__header {
    color: $theme-font-color-main;
    .el-picker-panel__icon-btn {
      color: $theme-font-color-main;
    }
  }
  .el-picker-panel {
    button, .el-date-picker__header-label {
      color: $theme-font-color-main;
    }
    button:hover, .el-date-picker__header-label:hover {
      color: $theme-font-color-hover;
    }
  }
  .el-picker-panel__content {
    .el-year-table, .el-month-table {
      td:not(.disabled) .cell {
        color: $theme-font-color-main;
      }
      td .cell:hover,
      td.current:not(.disabled) .cell,
      td.today .cell {
        color: $theme-font-color-hover;
      }
    }
    .prev-month,
    .next-month {
      color: $theme-font-color-onlyread;
    }
    .available {
      color: $theme-font-color-main;
    }
  }
  // 重写选择面板底部样式
  .el-picker-panel__footer {
    background-color: $theme-bg-color;
    .el-button--text {
      color: $theme-button-confirm-color;
    }
    .el-button--text:hover {
      color: $theme-button-confirm-color-hover;
    }
    .el-button--default {
      border: 1px solid #CFD7E5;
      background-color: transparent;
    }
    .el-button--default:hover {
      border: 1px solid $theme-button-confirm-color-hover;
      color: $theme-button-confirm-color-hover;
    }
  }
  // 日期选择面板中 时间标题颜色
  .el-date-table th {
    color: $theme-font-color-main;
  }
  // .el-date-range-picker__content {
    .el-date-table td.in-range div,
    .el-date-table td.in-range div:hover,
    .el-date-table.is-week-mode .el-date-table__row.current div,
    .el-date-table.is-week-mode .el-date-table__row:hover div {
      background-color: $theme-message-info-background-color-active;
    }
    .el-date-table td.today span,
    .el-date-table td.available:hover {
      color: $theme-font-color-hover;
    }
    .el-date-table td.end-date span,
    .el-date-table td.start-date span,
    .el-date-table td.current:not(.disabled) span {
      color: #fff;
      background-color: $theme-font-color-hover;
    }

  // }
    .el-picker-panel__footer .el-button--text,
    .el-picker-panel__footer .el-button--text:hover,
    .el-picker-panel__footer .el-button--default:hover {
      color: $theme-font-color-hover;
    }
    .el-picker-panel__footer .el-button--default:hover {
      color: $theme-font-color-hover;
      border-color: $theme-font-color-hover;
    }
  // 重写时间选择器文字颜色
  .el-time-panel {
    .el-time-spinner__item {
      color: $theme-font-color-default;
    }
    .active, .cancel {
      color: $theme-font-color-main;
    }
    .confirm {
      color: $theme-font-color-card-title;
    }
  }

  .el-input-group__append,
  .el-input-group__prepend {
    border: 0px;
    color: $theme-font-color-main;
    background-color: $theme-message-info-background-color-hover;
    border: 1px solid #CFD7E5;
    border-left: none;
  }

  // 重写el-form表单样式
  .el-form {
    .el-form-item {
      margin-bottom: 0px;
    }

    .el-form-item__label {
      font-size: 14px;
      font-weight: 400;
      // color: #2e3647;
      color: $theme-font-color-main;
    }
    // 更改一个表单项 一组输入框的位置 令其垂直居中
    .group-item {
      .el-form-item__content {
        padding: 4px 0;
      }
    }
  }

  // 输入框数字加减按钮样式
  .el-input-number__increase, .el-input-number__decrease {
    color: $theme-font-color-default;
    background-color: $theme-table-border-color;
    border-left: 0px;
    border-right: 0px;
  }

  .el-table::before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: $theme-table-border-color;
  }

  .el-table [class*=el-table__row--level] .el-table__expand-icon{
    color: #CCCCCC;
  }

  // tooltip边框
  .el-tooltip__popper.is-light{
    border: 1px solid $theme-tooltip-border-color;
  }

  .el-table td,
  .el-table th.is-leaf {
      border-bottom: 1px solid $theme-table-border-color;
  }

  // 重写el-table样式
  .el-table {
    // 背景颜色重置
    background-color: $theme-bg-color; 
    // 表头颜色
    .el-table__header th {
      background-color: $theme-bg-color !important;
      color: $theme-font-color-main !important;
    }
    // 表格内容颜色
    tr {
      background-color: $theme-bg-color !important;
      color: $theme-font-color-main !important;
    }
    .current-row {
      background-color: $theme-message-info-background-color-hover;
    }
    thead {
      .cell {
        font-size: 14px;
      }
    }
    tbody {
      .cell {
        font-size: 14px;
      }
    }
  }
  // 鼠标悬停颜色
  .el-table--enable-row-hover .el-table__body tr:hover  {
    background-color: $theme-message-info-background-color-hover;
  }
  .el-table__body tr:hover > td {
    background-color: $theme-message-info-background-color-hover;
  }
  .el-table__body tr.hover-row > td.el-table__cell{
    background-color: $theme-message-info-background-color-hover;
  }
  .el-table__body tr:hover>td.el-table__cell {
    background-color: $theme-message-info-background-color-hover;
  }
  // 当前行颜色
  .el-table__body tr.current-row > td {
    background-color: $theme-message-info-background-color-hover;
  }
  .el-table--border{
    border-color: $theme-table-border-color;
  }
  .el-table__cell{
    border-color: $theme-table-border-color;
  }

  //重写el-pagination样式
  .el-pagination {
    // float: right;

    span:not([class*=suffix]) {
      font-size: 14px;
      color: $theme-font-color-main;
    }

    // .el-page,
    // .number {
    //   font-size: 14px;
    // }

    .btn-prev, .btn-next, .el-pager li {
      color: $theme-font-color-main;
      background-color: $theme-pagination-background-color;
      border: 1px solid $theme-pagination-border-color;
      border-radius: 6px;
    }
    .btn-prev:hover, .btn-next:hover, .el-pager li:hover {
      color: $theme-font-color-hover;
    }
    .el-pager li:not(.disabled).active {
      color: $theme-font-color-hover;
      background-color: $theme-pagination-background-color-active;
      border: 1px solid $theme-pagination-border-color-active;
    }
    .el-pager li:not(.disabled):hover {
      color: $theme-font-color-hover;
      // background-color: $theme-pagination-background-color-active;
    }
  }

  //重写el-select下拉框样式
  .el-select-dropdown {
    .el-select-dropdown__list {
      li.el-select-dropdown__item {
        font-size: 14px;
        color: $theme-font-color-main;
      }
      li.el-select-dropdown__item.hover,
      .el-select-dropdown__item:hover {
        color: $theme-font-color-main;
        background-color: $theme-message-info-background-color-hover;
      }

      li.el-select-dropdown__item.selected {
        font-size: 14px;
        color: $theme-font-color-main;
        background-color: $theme-message-info-background-color-active;
      }
    }
  }

  .el-cascader-menu {
    color: $theme-font-color-main;
    li:hover {
      color: $theme-font-color-main;
      background-color: $theme-message-info-background-color-hover;
    }
    .el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {
      color: $theme-font-color-main;
      background-color: $theme-message-info-background-color-active;
    }
  }
  .el-cascader__search-input {
    background-color: $theme-bg-color;
  }

  // 重写 el-radio 样式
  .el-radio__label {
    color: $theme-font-color-default;
  }
  .el-radio__input.is-disabled.is-checked .el-radio__inner {
    background-color: #409EFF !important;
    border-color: #409EFF !important;
  }

  .is-checked .el-radio__input.is-disabled+span.el-radio__label {
    color: #409EFF !important;
  }

  // 重写 el-checkbox 样式
  .el-checkbox__label {
    color: $theme-font-color-default;
  }
  .el-checkbox__inner:hover, .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: $theme-font-color-hover;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: $theme-font-color-hover;
    border-color: $theme-font-color-hover;
  }

  //重写el-dialog头部样式
  .el-dialog__header {
    text-align: center;
    background: $theme-message-info-background-color;
    padding: 10px 20px;

    .el-dialog__headerbtn {
      top: 12px !important;
      font-size: 22px;
      line-height: 26px !important;
    }

    .el-dialog__headerbtn .el-dialog__close {
      color: $theme-font-color-main;
    }

    .el-dialog__title {
      color: $theme-font-color-title;
      font-size: 18px;
      font-weight: bold;
      line-height: 26px !important;
    }
  }

  .el-dialog__body {
    // padding: 25px 25px 0px !important;
    background-color: $theme-message-info-background-color;
    color: $theme-font-color-main;
    // margin-right: 0.375rem;

    .el-form-item {
      margin-bottom: 22px !important;
    }
  }

  // 一开始隐藏滚动条
  .el-dialog__body::-webkit-scrollbar {
    // display: none;
  }

  // 鼠标经过再显示滚动条
  .el-dialog__body:hover::-webkit-scrollbar {
    display: block;
    width: 0.5rem;
    height: 0.6rem;
    background-color: #fff;
    border-radius: 0.625rem;
  }

  // 滚动条颜色
  ::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
    background-color: $theme-scrollbar-bg-color-default !important;
  }

  // 拖拽按钮颜色
  ::-webkit-scrollbar-thumb {
    border-radius: 0.5rem;
    background-color: $theme-scrollbar-thumb-olor-default !important;
  }

  .el-dialog__footer {
    background-color: $theme-message-info-background-color;
    color: $theme-font-color-main;
  }

  // 特殊处理告警弹窗
  .alarmVideo_dialog {
    .el-dialog__body {
      padding: 10px 20px !important;
    }
  }

  .custom-el-dialog-title-style {
    background-color: $theme-message-info-background-color;
    color: $theme-font-color-main;

    .el-dialog__header {
      background-color: $theme-font-color-title;
    }
  }

  //重写el-progress进度条样式
  .el-progress {
    .el-progress-bar__outer {
      height: 25px !important;
    }

    .el-progress-bar__inner {
      background-color: #719DF5;
    }

    .el-progress-bar__innerText {
      font-size: 18px;
    }
  }

  .el-button {
    // border: 0px;
    // padding: 0px;
  }

  .el-input-group__append{
    border: none;
  }

  .el-button--text {
    font-size: 14px;
    padding: 0px !important;
  }

  // 重写通知弹窗位移
  .el-notification {
    right: 34px !important;
    z-index: 1999 !important;
  }

  // 重写下拉菜单样式
  .el-dropdown {
    color: $theme-font-color-main;
  }
  .el-dropdown-menu {
    background-color: $theme-bg-color;
    border-color: $theme-table-border-color;
    .el-dropdown-menu__item {
      color: $theme-font-color-main;
    }
    .el-dropdown-menu__item:not(.is-disabled):hover{
      background-color: $theme-message-info-background-color-hover;
      color: $theme-font-color-main;
    }
  }

  // 重写 el-tree 样式
  .el-tree {
    background-color: $theme-bg-color;
    // 文字和父节点展开符号颜色
    .el-tree-node__expand-icon,
    .el-tree-node__label {
      color: $theme-font-color-main !important;
    }
    // 子节点符号设置透明
    .el-tree-node__expand-icon.is-leaf {
      color: transparent !important;
    }
    // 点击展开收起符号 节点的背景颜色
    .el-tree-node__content {
      background-color: transparent !important;
    }
    // 节点鼠标悬停颜色
    .el-tree-node__content:hover  {
      background-color: $theme-message-info-background-color-hover !important;
    }
    .el-tree-node.is-current > .el-tree-node__content {
      background-color: $theme-message-info-background-color-active !important;
    }
  }

  // 重写 el-upload 样式
  .el-upload--picture-card {
    background-color: $theme-bg-color;
  }
  .el-upload--picture-card i {
    color: $theme-font-color-default;
  }

  // 重写富文本编辑器样式
  .ql-snow .ql-picker {
    line-height: 22px;
  }
  .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    background-color: $theme-bg-color;
    .ql-picker-item {
      color: $theme-font-color-main;
    }
  }
  .ql-editor.ql-blank::before {
    color: $theme-font-color-default;
  }

  // 重写分界线样式
  .el-divider__text {
    background-color: $theme-container-background-color;
    color: $theme-font-color-main;
    font-size: 18px;
  }

  // 背景图片和遮罩
  .dd-layout-header-aside-group {
    background-color: $theme-bg-color;

    // .dd-layout-header-aside-mask {
    //   background: $theme-bg-mask;
    // }
  }

  // 重写高德地图组件 搜索结果下拉框样式
  .amap-sug-result {
    background-color: $theme-bg-color;

    .auto-item:hover {
      background-color: $theme-message-info-background-color-hover;
    }
  }
  // 重写高德地图组件 右键菜单样式
  .amap-menu-outer {
    background-color: $theme-bg-color;

    li:hover {
      background-color: $theme-message-info-background-color-hover;
    }
  }

  // 菜单项目
  @mixin theme-menu-hover-style {
    color: $theme-menu-item-color-hover;

    i.iconfont {
      color: $theme-menu-item-color-hover;
    }

    background: $theme-menu-item-background-color-hover;
  }

  %el-menu-icon {
    i {
      display: inline-block;
      width: 14px;
      text-align: center;
      margin-right: 5px;
    }

    svg {
      margin: 0px;
      height: 14px;
      width: 14px;
      margin-right: 5px;
    }
  }

  .el-submenu__title {
    @extend %unable-select;
    @extend %el-menu-icon;
    height: 36px;
    line-height: 36px;
    border-radius: 3px;
  }

  .el-menu-item {
    @extend %unable-select;
    @extend %el-menu-icon;
    margin: 4px 0px;
  }

  .el-submenu__title:hover {
    @include theme-menu-hover-style;
  }

  .el-menu-item:hover {
    @include theme-menu-hover-style;
  }

  .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    @include theme-menu-hover-style;
  }

  .el-menu--horizontal .el-menu .el-submenu__title:hover {
    @include theme-menu-hover-style;
  }

  // 顶栏
  .dd-theme-header {

    // 顶栏菜单空间不足时显示的滚动控件
    .dd-theme-header-menu {

      .dd-theme-header-menu__prev,
      .dd-theme-header-menu__next {
        color: $theme-header-item-color;
        background: $theme-header-item-background-color;

        &:hover {
          color: $theme-header-item-color-hover;
          background: $theme-header-item-background-color-hover;
        }
      }
    }

    .dd-header-title-show {
      color: $theme-header-title-color;
    }
    .dd-header-title-none {
      color: rgba($theme-bg-color, 0);
    }

    // 切换按钮
    .toggle-aside-btn {
      i {
        color: $theme-header-item-color;
        background: $theme-header-item-background-color;

        &:hover {
          color: $theme-header-item-color-hover;
        }
      }
    }

    // 顶栏菜单
    .el-menu {
      .el-menu-item {
        transition: border-top-color 0s;
        color: $theme-header-item-color;
        background: $theme-header-item-background-color;

        i.iconfont {
          color: inherit;
        }

        &:hover {
          color: $theme-header-item-color-hover;
          background: $theme-header-item-background-color-hover;

          i.iconfont {
            color: inherit;
          }
        }

        &:focus {
          color: $theme-header-item-color-focus;
          background: $theme-header-item-background-color-focus;

          i.iconfont {
            color: inherit;
          }
        }

        &.is-active {
          color: $theme-header-item-color-active;
          background: $theme-header-item-background-color-active;

          i.iconfont {
            color: inherit;
          }
        }
      }

      .el-submenu {
        &.is-active {
          .el-submenu__title {
            color: $theme-header-item-color-active;
            background: $theme-header-item-background-color-active;

            i.iconfont {
              color: inherit;
            }
          }
        }

        .el-submenu__title {
          transition: border-top-color 0s;
          color: $theme-header-item-color;
          background: $theme-header-item-background-color;

          i.iconfont {
            color: inherit;
          }

          .el-submenu__icon-arrow {
            color: $theme-header-item-color;
          }

          &:hover {
            color: $theme-header-item-color-hover;
            background: $theme-header-item-background-color-hover;

            i.iconfont {
              color: inherit;
            }

            .el-submenu__icon-arrow {
              color: $theme-header-item-color-hover;
            }
          }

          &:focus {
            color: $theme-header-item-color-focus;
            background: $theme-header-item-background-color-focus;

            i.iconfont {
              color: inherit;
            }

            .el-submenu__icon-arrow {
              color: $theme-header-item-color-focus;
            }
          }
        }
      }
    }

    // 顶栏右侧
    .dd-header-right {
      .btn-text {
        // color: $theme-header-item-color;

        &.can-hover {
          &:hover {
            color: $theme-header-item-color-hover;
            background: $theme-header-item-background-color-hover;
          }
        }
      }
    }
  }

  // [布局] 顶栏下面
  .dd-theme-container {
    border-top: $theme-container-border-outer;

    // 侧边栏
    .dd-theme-container-aside {
      border-right: $theme-container-border-outer;

      // 菜单为空的时候显示的信息
      .dd-layout-header-aside-menu-empty {
        background: $theme-aside-menu-empty-background-color;

        i {
          color: $theme-aside-menu-empty-icon-color;
        }

        span {
          color: $theme-aside-menu-empty-text-color;
        }

        &:hover {
          background: $theme-aside-menu-empty-background-color-hover;

          i {
            color: $theme-aside-menu-empty-icon-color-hover;
          }

          span {
            color: $theme-aside-menu-empty-text-color-hover;
          }
        }
      }

      // [菜单] 正常状态
      .el-menu {
        // padding: 0 3px;

        .el-menu-item {
          color: $theme-aside-item-color;
          background: $theme-aside-item-background-color;
          // padding-left: 20px !important;
          border-radius: 3px;

          i {
            color: $theme-aside-item-color;
          }

          &:hover {
            color: $theme-aside-item-color-hover;
            fill: $theme-aside-item-color-hover;
            background: $theme-aside-item-background-color-hover;

            i {
              color: $theme-aside-item-color-hover;
            }
          }

          &:focus {
            color: $theme-aside-item-color-focus;
            fill: $theme-aside-item-color-focus;
            background: $theme-aside-item-background-color-focus;

            i {
              color: $theme-aside-item-color-focus;
            }
          }

          &.is-active {
            color: $theme-aside-item-color-active;
            fill: $theme-aside-item-color-active;
            background: $theme-aside-item-background-color-active;

            i {
              color: $theme-aside-item-color-active;
            }
          }
        }

        // .el-submenu {
        //   .el-submenu__title {
        //     padding-left: 20px !important;
        //   }
        // }
      }

      .el-submenu {
        .el-submenu__title {
          color: $theme-aside-item-color;
          background: $theme-aside-item-background-color;

          i {
            color: $theme-aside-item-color;
          }

          .el-submenu__icon-arrow {
            color: $theme-aside-item-color;
          }

          &:hover {
            color: $theme-aside-item-color-hover;
            background: $theme-aside-item-background-color-hover;

            i {
              color: $theme-aside-item-color-hover;
            }

            .el-submenu__icon-arrow {
              color: $theme-aside-item-color-hover;
            }
          }
        }

        .el-menu--inline {
          padding: 0px;

          // .el-menu-item {
          //   padding-left: 44px !important;
          // }
        }
      }

      // .el-menu--collapse {
      //   .el-submenu {
      //     .el-submenu__title {
      //       padding-left: 20px !important;
      //     }
      //   }
      // }
    }

    .dd-theme-container-main {

      // 主体部分分为多页面控制器 和主体
      .dd-theme-container-main-header {
        background-color: $theme-container-background-color;

        // 多页面控制器
        .dd-multiple-page-control {
          .el-tabs__header.is-top {
            border-bottom-color: $theme-multiple-page-control-border-color;
          }

          .el-tabs__nav {
            border-color: $theme-multiple-page-control-border-color !important;

            .el-tabs__item {
              @extend %unable-select;
              color: $theme-font-color-default;
              background-color: $theme-multiple-page-control-background-color !important;
              border-left-color: $theme-multiple-page-control-border-color;
              font-weight: 400;

              &:first-child {
                border-left: none;

                &:hover {
                  padding: 0px 20px;
                }
              }
            }

            .is-disabled {
              color: #304369;
            }

            .el-tabs__item.is-active {
              color: $theme-multiple-page-control-color-active;
              background-color: $theme-multiple-page-control-background-color-active !important;
              border-bottom-color: $theme-multiple-page-control-border-color-active;
              // font-weight: bold;
            }
          }

          %el-tabs__nav {
            font-size: 20px;
          }

          .el-tabs__nav-prev {
            @extend %el-tabs__nav;
            color: $theme-multiple-page-control-nav-prev-color;
          }

          .el-tabs__nav-next {
            @extend %el-tabs__nav;
            color: $theme-multiple-page-control-nav-next-color;
          }
        }

        // 多页控制器的关闭控制
        .dd-multiple-page-control-btn {
          .el-dropdown {
            .el-button-group {
              .el-button {
                background-color: $theme-multiple-page-control-background-color;
                border-color: $theme-multiple-page-control-border-color;
                color: $theme-font-color-main;
              }
              .el-button:hover {
                background-color: $theme-multiple-page-control-background-color-active;
              }
            }
          }
        }

        // 面包屑导航
        .dd-bread-crumb{
          background: $theme-bread-crumb-background-color;
          span{
            color: $theme-aside-item-color;
          }
        }
      }

      // 主体
      .dd-theme-container-main-body {
        background-color: $theme-container-background-color;
        // 布局组件
        .container-component {

          // [组件]
          // dd-container-full 填充型
          .dd-container-full {
            // border: $theme-container-border-outer;
            border-top: none;
            border-bottom: none;

            .dd-container-full__header {
              border-bottom: $theme-container-border-inner;
              background: $theme-container-header-footer-background-color;
            }

            .dd-container-full__body {
              background: $theme-container-background-color;
            }

            .dd-container-full__footer {
              border-top: $theme-container-border-inner;
              background: $theme-container-header-footer-background-color;
            }
          }

          // [组件]
          // dd-container-full-bs 填充型 滚动优化
          .dd-container-full-bs {
            border: $theme-container-border-outer;
            border-top: none;
            border-bottom: none;

            .dd-container-full-bs__header {
              border-bottom: $theme-container-border-inner;
              background: $theme-container-header-footer-background-color;
            }

            .dd-container-full-bs__body {
              background: $theme-container-background-color;
            }

            .dd-container-full-bs__footer {
              border-top: $theme-container-border-inner;
              background: $theme-container-header-footer-background-color;
            }
          }

          // [组件]
          // dd-container-ghost 隐形布局组件
          .dd-container-ghost {
            .dd-container-ghost__header {
              border-bottom: $theme-container-border-outer;
              border-left: $theme-container-border-outer;
              border-right: $theme-container-border-outer;
              background: $theme-container-header-footer-background-color;
            }

            .dd-container-ghost__footer {
              border-top: $theme-container-border-outer;
              border-left: $theme-container-border-outer;
              border-right: $theme-container-border-outer;
              background: $theme-container-header-footer-background-color;
            }
          }

          // [组件]
          // dd-container-ghost-bs 隐形布局组件 滚动优化
          .dd-container-ghost-bs {
            .dd-container-ghost-bs__header {
              border-bottom: $theme-container-border-outer;
              border-left: $theme-container-border-outer;
              border-right: $theme-container-border-outer;
              background: $theme-container-header-footer-background-color;
            }

            .dd-container-ghost-bs__footer {
              border-top: $theme-container-border-outer;
              border-left: $theme-container-border-outer;
              border-right: $theme-container-border-outer;
              background: $theme-container-header-footer-background-color;
            }
          }

          // [组件]
          // dd-container-card 卡片型
          .dd-container-card {
            .dd-container-card__header {
              border-bottom: $theme-container-border-inner;
              border-left: $theme-container-border-outer;
              border-right: $theme-container-border-outer;
              background: $theme-container-header-footer-background-color;
            }

            .dd-container-card__body {
              .dd-container-card__body-card {
                background: $theme-container-background-color;
                border-left: $theme-container-border-outer;
                border-right: $theme-container-border-outer;
                border-bottom: $theme-container-border-outer;
              }
            }

            .dd-container-card__footer {
              border-top: $theme-container-border-outer;
              border-left: $theme-container-border-outer;
              border-right: $theme-container-border-outer;
              background: $theme-container-header-footer-background-color;
            }
          }

          // [组件]
          // dd-container-card-bs 卡片型 滚动优化
          .dd-container-card-bs {
            .dd-container-card-bs__header {
              border-bottom: $theme-container-border-inner;
              border-left: $theme-container-border-outer;
              border-right: $theme-container-border-outer;
              background: $theme-container-header-footer-background-color;
            }

            .dd-container-card-bs__body {
              .dd-container-card-bs__body-card {
                background: $theme-container-background-color;
                border-left: $theme-container-border-outer;
                border-right: $theme-container-border-outer;
                border-bottom: $theme-container-border-outer;
              }
            }

            .dd-container-card-bs__footer {
              border-top: $theme-container-border-outer;
              border-left: $theme-container-border-outer;
              border-right: $theme-container-border-outer;
              background: $theme-container-header-footer-background-color;
            }
          }
        }
      }
    }
  }
}
